<template>
    <div class="readBox">
     <mt-loadmore :top-method="loadTop"  @top-status-change="handleTopChange" ref="loadmore">
        <ul class="readWarp">
          <li v-for="item in list">{{ item }}</li>
        </ul>
        <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
          <span v-show="topStatus === 'loading'">Loading...</span>
        </div>
      </mt-loadmore>
    </div>
</template>

<script>
import axios from 'axios'
export default{
     data() {
      return {
        topStatus: '',
        list:['阿克苏接电话开局号','跨境可视电话的','爱上看见的喊道','阿卡丽速度快拉数据到']
      };
    },
    methods: {
      handleTopChange(status) {
         this.topStatus = status;
      },
      loadTop() {
          this.list.push('添加了新的数据。。');
          this.$refs.loadmore.onTopLoaded();
      }
    }

}
</script>

<style lang="Sass">
    .readBox{margin-top: 2rem; margin-bottom: 3rem;

      .readWarp{width: 100; list-style: none;background: #fff; margin-top: .5rem;

        li{ height: 3rem;  padding-left: 2rem; border-bottom: .05rem solid #e8e8e8; line-height: 3rem; }
      }
    }
</style>